<template>
  <div class="home">
    <van-row type="flex" justify="center">
      <van-col>
        <van-image
          :src="require('@/assets/logo.png')"
          width="150px"
          height="60px"
        />
      </van-col>
    </van-row>
    <Search></Search>
    <Teachers></Teachers>
    <baidu-map ak="62lwVg17dwgVY7qh7VPc6U7oaBmtkvCw" @ready="getlocation">
    </baidu-map>
  </div>
</template>

<script>
import Teachers from "@/components/Home/Teachers";
import Search from "@/components/Home/Search";
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    Teachers,
    Search,
    BaiduMap,
  },
  computed: {
    ...mapState("user", ["myCity", "tokenInfo"]),
  },
  methods: {
    ...mapMutations("user", ["updateMyCity", "updateUserInfo"]),
    getlocation({ BMap, map }) {
      let _this = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function (r) {
          if (this.getStatus() == 0) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            let gc = new BMap.Geocoder();
            gc.getLocation(r.point, function (rs) {
              _this.updateMyCity(rs.addressComponents.city);
            });
          } else {
            _this.updateMyCity("获取失败");
            console.log("failed" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    },
  },
};
</script>

<style lang="less">
.home {
  padding-top: 10px;
  padding-bottom: 50px;
}
</style>
